GravityDocumentationfor V.3.6

Welcome

Welcome to our Gravity coming soon / under construction HTML template thank you for purchasing one of our products, your support is much appreciated.

Please drop us a line and let us know what you think of this template if you have any suggestions for improvements or extra features if there’s something you don’t like or you just want to say “Hello”.

We count on your help to constantly improve the quality of our products and bring more value to you and all of our other customers.

Now, let’s get to the help part.

First of all, customization of this template will, of course, require knowledge of HTML and for heavier customization a bit of CSS and Javascript.

Getting started

If you already have experience in web design and template editing/uploading you can skip this section.

Requirements

Excluding the language skills mentioned before you need also proper software to edit the template files.

You can find a recommendation for software in the support section at the bottom of this page.

You also need a hosting service where you can upload your files to the internet.

Installation

This a very generic guide for installing/uploading an HTML template.

If your hosting provider is providing a guide how to upload a static HTML website/template you should use it instead.

1. Get your files

   Open the HTML files folder that is including your main template files.

2. Log In

   Log into your hosting space via an FTP software ( Filezilla or Cyberduck for example ).

3. Upload

   Upload all files from your HTML files folder into another folder on your hosting space via FTP software.

File Structure

Below you can find the file structure from your "01. Main Files" folder including a small description for each file.

Essentials

Config File

The config.js file included in your download package can be found in your 01.Main Files folder and can be used to customize the hero, overlay and background. Use the table of contents at the top of your config.js file to locate the option you want to edit. Make sure to save the file and refresh your browser to see changes.

Background

If you want to change the background you have to update the background option in your config.js file under section /** 3. HERO CONFIG to your desired background.

Additional options for your selected background can be found in this particular section ( Please use the table of contents at the top of your config.js file to locate the additional options for your selected background )

Overlay

You can edit the following overlay options under section /** 2. OVERLAY CONFIG in your config.js file.

• Color Scheme ( Black or White )
• Overlay Animation ( Fade or Slide )
• Overlay Content Animation ( Fade or Slide )
• Bullet Navigation ( On or Off )
• Merge Sections On Mobile ( On or Off )

You can add an unlimited amount of overlay sections. The following code should help you to understand the structure of the overlay.

                      
<!-- OVERLAY CONTAINER -->    
<div id="overlay">

   
   
    <!-- OVERLAY SECTION 1 -->
    <section class="overlay">

        <!-- CONTAINER MID -->
        <div class="container-mid">

            <!-- CONTAINER -->
            <div class="container">

                <h1>Overlay 1</h1>

            </div>
            <!-- /CONTAINER -->

        </div>
        <!-- /CONTAINER MID -->

    </section>
    <!-- /OVERLAY SECTION 1 -->
    
    
    
    <!-- OVERLAY SECTION 2 -->
    <section class="overlay">

        <!-- CONTAINER MID -->
        <div class="container-mid">

            <!-- CONTAINER -->
            <div class="container">

                <h1>Overlay 2</h1>

            </div>
            <!-- /CONTAINER -->

        </div>
        <!-- /CONTAINER MID -->

    </section>
    <!-- /OVERLAY SECTION 2 -->



</div>
<!-- /OVERLAY CONTAINER -->
                      
                  

Google Analytics

You can enable or disable Google Analytics and enter your Google Analytics tracking ID under section /** 4. GOOGLE ANALYTICS in your config.js file.

Custom Code

You can add your custom CSS code in your assets/css/custom.css file and you can add your custom JS code in your assets/js/custom.js file.

Forms

Subscribe Form

There are 2 methods available:

• List

  Will save subscribers emails in a .txt file in your server's root folder.

  Open up your assets/php/subscriber.php file and update the subscriber form mode to "file".

  Optional you can change the file name and path under section /** 1.1. MAIN SETTINGS [ FILE MODE ] in your assets/php/subscriber.php file.

• Mailchimp

  Will add subscribers emails to your Mailchimp list.

  Open up your assets/php/subscriber.php file and update the subscriber form mode to "mailchimp".

  The next step is to enter your MailChimp API key ( Where can I find my API key ? ) and your MailChimp list id ( Where can I find my list ID? ) under section /** 1.2. MAIN SETTINGS [ MAILCHIMP MODE ] in your assets/php/subscriber.php file.

  Make sure that your list asks just the email address. Check it under Lists > Signup forms > General forms > Build it on your Mailchimp profile.

Additionally you can edit the success/error messages for both methods in your assets/php/subscribe.php file.

Contact Form

You only have to enter your email address in your assets/php/contact.php file to set up the contact form.

Additionally, you can also enter a custom email identifier ( Email title you can see in your email post box ) and you can customize the success/error messages in your assets/php/contact.php file.

Assets Used

Fonts

Raleway - From Google Fonts

Open Sans - From Google Fonts

Icons

Themify - Icon pack

Font Awesome - Icon pack

Javascript

jQuery - Jquery javascript library

Bootstrap - Responsive javascript framework library

three.js - 3d javascript library

Vegas - Vegas background slideshow plugin

JQUERY.MB.YTPLAYER - Youtube player plugin

Wagerfield Parallax - Parallax javascript library

Flat Surface Shader - Flat Surface Shader javascript library

Cycle 2 - Text / Element cycle plugin

mgGlitch - Image Glitch effect plugin

CSS

Bootstrap - Responsive css framework library

Vegas - Vegas background slideshow plugin

PHP

MailChimp API - Super-simple, minimum abstraction MailChimp API v3 wrapper, in PHP

Images

Pexels - (Images included in download package ) Royalty free stock photos under Creative Commons CC0

Support

Help

FAQ - Frequently asked questions

Email - Support via Envato contact form

Recommended Software

Brackets - Open source text editor for web design ( free )

Dreamweaver - All in one web developer solution ( paid )

Sublime Text - Text editor for code ( paid )

Helpful Tools

Sass Meister - Online Sass compiler

CSS Compressor - Compress your stylesheets to speed up your page.

Javascript Compressor - Compress your scripts to speed up your page.

Autoprefixer - Add the desired vendor prefixes and remove unnecessary in your CSS.

© 2017 Avanzare. All rights reserved.